<template>
	<scroll-view class="wanlshop-find-container" :style="{
			paddingTop: `${headHeight}px`,
			height: `${windowHeight}px`,
			backgroundColor: ``
		}" scroll-y enable-back-to-top enable-flex="true" @scrolltoupper="handleUpper" @scrolltolower="handleLower">
		<block v-if="!user.isLogin && !userNo">
			<view class="bg-white margin-bj radius-bock flex align-center justify-center padding-lr padding-tb-xl">
				<view class="text-center">
					<text class="wanl-gray">登录后才能看到您关注店铺的动态哦</text>
					<view class="margin-top-sm">
						<button class="cu-btn bg-orange" @tap="$wanlshop.auth('/pages/find')">
							马上登陆
						</button>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="wanlshop-find-container__list  wanl-find margin-top-sm" v-for="(find, index) in dataList"
				:key="find.id">
				<view class="margin-lr-bj bg-white radius-bock padding-lr-bj padding-top-bj">
					<!-- 头部 -->
					<view class="userinfo">
						<block v-if="find.shop">
							<view class="avatar" @tap="handleUser(find.user_no)">
								<view class="cu-avatar round margin-right-bj" :style="{
										backgroundImage:
											'url(' +
											$wanlshop.oss(find.shop.avatar, 35, 35, 2, 'avatar') +
											')'
									}"></view>
								<view class="content">
									<view class="wanl-find-head text-cut">
										<text class="wanl-black margin-right-bj shopname">
											{{ find.shop.shopname }}
										</text>
										<!-- <view
											v-if="find.isLive"
											@tap="onLive(find.isLive.id)"
											class="cu-tag sm wanl-bg-orange round"
										>
											<text class="wlIcon-zhibo"></text>
											直播中
										</view> -->
									</view>
									<view class="wanl-gray text-min">
										{{ $wanlshop.timeToDate(find.createtime) }}
									</view>
								</view>
							</view>
							<view class="menu">
								<button class="cu-btn radius-bock text-sm" @click.stop="handleFollow(index, find.shop)">
									<view v-if="find.isFollow === 0">
										<text class="wlIcon-31xuanze margin-right-xs text-bold"></text>
										关注
									</view>
									<view v-else>
										<text class="wlIcon-31guanbi margin-right-xs text-bold"></text>
										取关
									</view>
								</button>
								<button class="cu-btn wlIcon margin-left-sm" @click.stop="onShop(find.shop.id)">
									<text class="wlIcon-31dianpu"></text>
								</button>
							</view>
						</block>
						<block v-else>
							<view class="avatar" @tap="handleUser(find.user_no)">
								<view class="cu-avatar round margin-right-bj" :style="{
										backgroundImage:
											'url(' +
											$wanlshop.oss(find.user.avatar, 35, 35, 2, 'avatar') +
											')'
									}"></view>
								<view class="content">
									<view class="wanl-find-head text-cut">
										<text class="wanl-black margin-right-bj shopname">
											{{ find.user.nickname }}
										</text>
										<!-- <view
											v-if="find.isLive"
											@tap="onLive(find.isLive.id)"
											class="cu-tag sm wanl-bg-orange round"
										>
											<text class="wlIcon-zhibo"></text>
											直播中
										</view> -->
									</view>
									<view class="wanl-gray text-min">
										{{ $wanlshop.timeToDate(find.createtime) }}
									</view>
								</view>
							</view>
							<view class="menu">
								<button class="cu-btn radius-bock text-sm" @click.stop="handleFollow(index)">
									<view v-if="find.isFollow === 0">
										<text class="wlIcon-31xuanze margin-right-xs text-bold"></text>
										关注
									</view>
									<view v-else>
										<text class="wlIcon-31guanbi margin-right-xs text-bold"></text>
										取关
									</view>
								</button>
							</view>
						</block>
					</view>
					<!-- 内容 -->
					<view class="content margin-tb-bj wanl-gray-dark text-cut-2" @tap="onFind(find)">
						<view class="cu-tag sm radius margin-right-xs" :class="[typeList[find.type]]">
							{{ find.type_text }}
						</view>
						{{ formatHtml(find.content) }}
					</view>
					<!-- 图片 -->
					<view class="container radius-bock">
						<block v-for="(img, kes) in find.images" :key="kes">
							<block v-if="find.type === 'live'">
								<view class="item" @tap="onFind(find)" :class="[kes == 0 ? 'item-live' : '']" :style="{
										backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')'
									}">
									<block v-if="kes == 0">
										<view class="play">
											<text :class="[
													find.live.state == 1
														? 'wlIcon-icon_zhibo-mian'
														: 'wlIcon-guijihuifang'
												]"></text>
										</view>
										<view class="state text-white" v-if="find.live.state == 1">
											<view class="tags wanl-bg-orange">
												<text class="wlIcon-zhibo"></text>
												<text class="text-min">直播</text>
											</view>
											<view class="text-sm">{{ find.live.views }} 在看</view>
										</view>
										<view class="state text-white" v-else>
											<view class="tags bg-grey">
												<text class="text-min">回放</text>
											</view>
											<view class="text-sm">{{ find.live.views }} 看过</view>
										</view>
										<!-- <view class="number text-white">
														<view>{{$wanlshop.toFormat(find.live.goods_ids.split(',').length,'hundred')}}</view>
														<text>宝贝</text> 
													</view> -->
										<view class="like text-center text-white" v-if="find.live.state == 1">
											<view class="likebut">
												<text class="wlIcon-yiguanzhu1"></text>
											</view>
											<text class="text-min">{{ find.live.like }}</text>
										</view>
									</block>
								</view>
							</block>
							<block v-else-if="find.type === 'video'">
								<view class="item item-1 text-sl radius-bock"
									:style="{ backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')' }"
									@tap="onFind(find)">
									<text class="wlIcon-video text-white"></text>
								</view>
							</block>
							<block v-else>
								<block v-if="find.images.length == 1">
									<view class="item item-1 radius-bock" @tap="previewImage(find.images, kes)" :style="{
											backgroundImage:
												'url(' + $wanlshop.oss(img, 200, 0) + ')'
										}"></view>
								</block>
								<block v-else-if="find.images.length == 3">
									<view class="item" @tap="previewImage(find.images, kes)"
										:class="[kes == 0 ? 'item-3' : '']" :style="{
											backgroundImage:
												'url(' + $wanlshop.oss(img, 200, 0) + ')'
										}"></view>
								</block>
								<block v-else>
									<view class="item" @tap="previewImage(find.images, kes)" :style="{
											backgroundImage:
												'url(' + $wanlshop.oss(img, 200, 200) + ')'
										}"></view>
								</block>
							</block>
						</block>
					</view>
					<!-- 商品 -->
					<scroll-view class="scroll-view margin-top-sm" scroll-x="true">
						<view class="scroll-view-item radius-bock" :class="[find.goods.length == 1 ? 'col-1' : '']"
							v-for="(goods, sub) in find.goods" :key="goods.id" @tap="onGoods(goods.id)">
							<view class="img">
								<image lazy-load :src="$wanlshop.oss(goods.image, 50, 50)"></image>
							</view>
							<view class="content padding-left-bj text-cut text-df">
								{{ goods.title }}
								<view class="flex align-center">
									<text class="text-price text-orange">{{ goods.price }}</text>
								</view>
							</view>
							<view class="icon text-lg wanl-gray-light">
								<text class="wlIcon-fanhui6"></text>
							</view>
						</view>
					</scroll-view>
					<view class="flex justify-between padding-tb-bj align-center">
						<view v-if="find.type == 'live'" class="wanl-gray-light text-sm" @tap="onFind(find)">
							{{ find.live.views }} 阅读
						</view>
						<view v-else class="wanl-gray-light text-sm" @tap="onFind(find)">
							{{ find.views }} 阅读
						</view>
						<view class="flex">
							<view :class="[find.isLike === 1 ? 'wanl-orange' : '']" @tap="handleLike(index)">
								<text :class="[
										find.isLike === 1 ? 'wlIcon-dianzan1' : 'wlIcon-dianzan11'
									]"></text>
								<text class="margin-left-xs">{{ find.likes }}</text>
							</view>
							<view class="margin-left" @tap="onFind(find, 'comments')"
								v-if="appConfig.comment_switch == 'Y'">
								<text class="wlIcon-pinglun"></text>
								<text class="margin-left-xs">{{ find.comments }}</text>
							</view>
						</view>
					</view>
					<!-- 1.1.6升级 -->
					<view class="padding-tb-bj solid-top text-center text-orange" v-if="find.newGoods > 0"
						@tap="onShop(find.shop.id)">
						进店查看 {{ find.newGoods }} 件新品
						<text class="wlIcon-fanhui6 margin-left-xs"></text>
					</view>
				</view>
			</view>
			<wanl-empty v-if="status !== 'loading' && dataList.length === 0" src="collect_default3x"
				text="没有找到任何发现动态" />
			<uni-load-more :status="status" :content-text="contentText" v-if="dataList.length > 0" />
		</block>
	</scroll-view>
</template>

<script>
	export default {
		name: 'wanlShopFind',
		props: {
			// 页面配置
			windowHeight: {
				type: Number,
				default: 0
			},
			headHeight: {
				type: Number,
				default: 0
			},
			currentItemId: {
				type: String,
				default: ''
			},
			userNo: {
				type: String,
				default: ''
			},
			appConfig: {
				type: Object,
				default () {
					return {};
				}
			},
			user: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		watch: {
			currentItemId(newVal, oldVal) {
				if (newVal === 'follow') {
					this.loadData();
				}
			}
		},
		data() {
			return {
				typeList: {
					new: 'bg-gradual-yellow',
					live: 'wanl-bg-orange',
					want: 'bg-gradual-green',
					activity: 'bg-gradual-orange',
					show: 'wanl-bg-pink',
					video: 'wanl-bg-orange'
				},
				dataList: [], //数据
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '我是有底线的'
				}
			};
		},
		methods: {
			async loadData(type) {
				this.status = 'loading';
				let data = {
					page: this.current_page
				};
				// 判断上拉还是下拉
				if (type === 'upper') {
					this.current_page = 1;
				} else if (type === 'lower') {
					if (this.current_page >= this.last_page) {
						this.status = 'noMore';
						return false;
					} else {
						this.current_page += 1;
					}
				}
				if (this.currentItemId === 'follow') {
					data.type = this.currentItemId;
				}
				// 请求数据
				await uni.request({
					url: '/wanlshop/find/find/getList',
					data: data,
					success: res => {
						if (type === 'lower') {
							this.dataList = this.dataList.concat(res.data.data);
						} else {
							this.dataList = res.data.data;
						}
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						// 判断是否还有数据
						if (res.data.current_page === res.data.last_page || res.data.total === 0) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
					}
				});
			},
			async handleLike(index) {
				if (this.$store.state.user.isLogin) {
					let data = this.dataList[index];
					await uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: data.id,
							type: 'likes'
						},
						success: res => {
							if (res.data.data === 0) {
								data.likes -= 1;
							} else {
								data.likes += 1;
							}
							data.isLike = res.data.data;
						}
					});
				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
			},
			async handleFollow(index, shop) {
				if (this.$store.state.user.isLogin) {
					let data = this.dataList[index];
					await uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: data.user_no,
							type: 'follow'
						},
						success: res => {
							if (shop) {
								let concern = this.$store.state.statistics.dynamic.concern;
								if (res.data.data === 0) {
									concern -= 1;
								} else {
									concern += 1;
								}
								this.$store.commit('statistics/dynamic', {
									concern: concern
								});
							}
							data.isFollow = res.data.data;
						}
					});
				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
			},
			handleUpper() {
				// this.loadData('upper');
			},
			handleLower() {
				this.loadData('lower');
			},
			handleUser(user_no) {
				this.$wanlshop.to(`/pages/apps/find/user?id=${user_no}`);
			},
			//预览图片
			previewImage(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			// 格式化html
			formatHtml(content) {
				return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
			}
		}
	};
</script>

<style lang="scss">
	.wanlshop-find-container {
		&__list {
			.userinfo {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					&[class*='wlIcon-'] {
						font-size: 28rpx;
					}
				}

				.avatar {
					width: calc(100% - 245rpx);
					display: flex;
					align-items: center;

					.cu-avatar {
						background-color: #f5f5f5;
						flex-shrink: 1;
					}

					.content {
						width: calc(100% - 90rpx);
					}

					.cu-tag {
						font-size: 20rpx;
						padding: 0px 10rpx !important;
					}
				}

				// 待优化溢出,临时解决方案
				.menu {
					text-align: right;
					width: 245rpx;
				}

				.cu-btn {
					&.sm {
						padding: 0 20rpx;
						font-size: 26rpx;
						height: 50rpx;
					}
				}
			}

			.content {
				.cu-tag {
					&.sm {
						padding: 6rpx;
					}
				}
			}

			.container {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;

				&.col-2 {
					grid-template-columns: 1fr 1fr;
				}

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #fff;
					min-height: 6rem;
					width: 100%;
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;

					&.item-1 {
						grid-column: 1 / 3;
						grid-row: 1 / 3;
						height: 600rpx;
					}

					&.item-3 {
						grid-column: 1 / 3;
						grid-row: 1 / 3;
					}

					&.item-live {
						position: relative;
						grid-column: 1 / 3;
						grid-row: 1 / 3;

						.play {
							width: 120rpx;
							height: 120rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 50%;
							background-color: rgba(0, 0, 0, 0.2);
							border: 1px solid rgba(255, 255, 255, 0.5);
							font-size: 56rpx;
							color: #fff;
						}

						.state {
							display: flex;
							position: absolute;
							left: 20rpx;
							bottom: 20rpx;
							background-color: rgba(0, 0, 0, 0.1);
							height: 36rpx;
							line-height: 36rpx;
							border-radius: 8rpx;
							overflow: hidden;

							&>view {
								padding: 0 12rpx;
							}

							.tags {
								height: 100%;
								border-radius: 8rpx;
								font-size: 28rpx;

								&>text {
									margin-right: 4rpx;
								}
							}
						}

						.number {
							position: absolute;
							background-color: rgba(0, 0, 0, 0.2);
							border: 1px solid rgba(255, 255, 255, 0.5);
							border-radius: 8rpx 8rpx 0 20rpx;
							overflow: hidden;
							padding: 8rpx 6rpx;
							top: 10rpx;
							right: 10rpx;
							line-height: 1;
							text-align: center;

							&>view {
								font-size: 30rpx;
							}

							&>text {
								font-size: 11px;
							}
						}

						.like {
							position: absolute;
							bottom: 15rpx;
							right: 30rpx;
							line-height: 1.2;

							.likebut {
								background-color: #327CFF;
								border-radius: 50%;
								width: 45rpx;
								line-height: 46rpx;
								height: 45rpx;
								font-size: 26rpx;
							}
						}
					}
				}
			}

			.scroll-view {
				white-space: nowrap;
				width: 100%;

				.scroll-view-item {
					display: inline-flex;
					width: 60%;
					height: 100rpx;
					overflow: hidden;
					margin-right: 10rpx;
					background-color: #f9f9f9;
					align-items: center;

					&.col-1 {
						width: 100%;
						margin-right: 0;
					}

					.img {
						height: 100rpx;
						width: 100rpx;
						border-radius: 18rpx 0 0 18rpx;
						background-color: #efefef;

						image {
							height: 100rpx;
							width: 100rpx;
							border-radius: 18rpx 0 0 18rpx;
							background-color: #efefef;
						}
					}

					.content {
						flex: 1;
						line-height: 1.3;
					}

					.icon {
						width: 60rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>